/*
 * @Author: Wilbur
 * @Date: 2019-08-20 10:22:36
 * @Last Modified by: ice
 * @Last Modified time: 2020-08-20 15:37:22
 */

<template>
    <div class="container jingang-list-container shoplist">
        <el-tabs
            v-model="shop_type"
            @tab-click="getTableData(1)"
        >
            <el-tab-pane
                label="自营店铺"
                name="1"
            />
            <el-tab-pane
                label="其他淘客"
                name="2"
            />
            <el-tab-pane
                label="学生店铺"
                name="3"
                disabled
            />
        </el-tabs>
        <div
            class="operation-wrapper"
            v-if="shop_type !== '3'"
        >
            <!--<el-radio-group
                v-model="shop_type"
                @change="getTableData(1)"
                size="small"
                style="margin-left:10px"
            >
                <el-radio-button :label="1" >自营</el-radio-button>
                &lt;!&ndash; <el-radio-button :label="2" >合作淘客</el-radio-button> &ndash;&gt;
                <el-radio-button :label="2" >其他淘客</el-radio-button>
            </el-radio-group>-->
            <div style="display: flex;margin-bottom: 10px">
                <div style="display:flex;margin: 0 30px 0 30px;align-items: center;">
                    <p style="white-space: nowrap;margin-right: 12px;color:#606266">手机号</p>
                    <el-input
                        v-model="keyword_hire_id"
                        placeholder="请输入要搜索的内容"
                        suffix-icon="el-icon-search"
                        size="small"
                        clearable
                        class="search-ipt"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div style="display:flex;margin-right: 30px;align-items: center;">
                    <p style="white-space: nowrap;margin-right: 12px;color:#606266">企业名称</p>
                    <el-input
                        v-model="company_name"
                        placeholder="请输入要搜索的内容"
                        suffix-icon="el-icon-search"
                        size="small"
                        clearable
                        class="search-ipt"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div style="display:flex;align-items: center;">
                    <p style="white-space: nowrap;margin-right: 12px;color:#606266">关键词</p>
                    <el-input
                        placeholder="请输入关键词"
                        style="margin-right:24px"
                        size="small"
                        @keyup.native.enter="getTableData(1)"
                        v-model="keyword">
                        <i
                            slot="prefix"
                            class="el-input__icon el-icon-search"/>
                    </el-input>
                </div>
                <div style="display:flex;margin-right: 30px;align-items: center;">
                    <p style="white-space: nowrap;margin-right: 12px;color:#606266">客户类型</p>
                    <el-select
                        placeholder="全部"
                        style="margin-right:24px"
                        size="small"
                        clearable
                        @change="getTableData(1)"
                        v-model="shop_group"
                    >
                        <el-option
                            label="全部"
                            :value="0"
                        />
                        <el-option
                            label="未设置"
                            :value="-1"
                        />
                        <el-option
                            v-for="item in shop_group_list"
                            :key="item.shop_group"
                            :label="item.title"
                            :value="item.shop_group"
                        />
                    </el-select>
                </div>
            </div>
            <!--<el-button
                type="primary"
                @click="fnAddClick"
                size="mini"
                style="height:32px"
            >
                新增淘客商家店铺
            </el-button>-->
            <el-button
                type="primary"
                @click="bindDialogShop = true"
                size="mini"
                style="height:32px"
            >
                创建店铺
            </el-button>
            <!--<div class="header-right">
                <el-button
                    type="primary"
                    size="small"
                    @click="fnGetContent()"
                >
                    自动回复设置
                </el-button>
            </div>-->
        </div>
        <div
            class="content-wrapper"
            v-if="shop_type !== '3'"
        >
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                    class="data-table"
                    v-loading="tableLoading"
                >
                    <el-table-column
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="shop_logo"
                        show-overflow-tooltip
                        label="商家logo">
                        <template slot-scope="scope">
                            <img
                                class="sub-logo"
                                :src="scope.row.shop_logo"
                                alt="">
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="shop_type"
                        show-overflow-tooltip
                        label="类型">
                        <template slot-scope="scope">
                            <template v-if="scope.row.shop_type == 1">自营</template>
                            <template v-if="scope.row.shop_type == 2">淘客-合作商家-绑定</template>
                            <template v-if="scope.row.shop_type == 3">淘宝-非合作商家-未绑定</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="shop_no"
                        width="150"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        label="店铺编号"/>
                    <el-table-column
                        prop="company_phone"
                        width="120"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        label="企业手机号"/>
                    <el-table-column
                        prop="company_name"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        label="企业名称"/>
                    <el-table-column
                        prop="shop_title"
                        :width="150"
                        show-overflow-tooltip
                        label="商家店铺名称"
                    >
                        <template slot-scope="scope">
                            <div
                                class="shop-wrapper"
                                @click="editBindingShop(scope.row)"
                            >
                                <div class="zd-shop-title">
                                    <p class="zd-title">
                                        {{ scope.row.shop_title }}
                                    </p>
                                    <p
                                        class="zd-title"
                                        v-for="item in scope.row.social_shop_list"
                                        :key="item.social_shop_no"
                                    >
                                        {{ item.title }}
                                    </p>
                                </div>
                                <i
                                    class="el-icon-edit"
                                    style="cursor: pointer; margin-left: 10px"
                                />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="goods_num"
                        show-overflow-tooltip
                        label="商品数量"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                :class="scope.row.goods_num == 0 ? 'shop-active' : ''"
                            >{{ scope.row.goods_num }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="kf_student_num"
                        label="客服"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <span
                                @click="fnGoPage(scope.row)"
                                class="el-cursor"
                                v-if="scope.row.kf_student_num > 0 "
                            >{{ scope.row.kf_student_num }}</span>
                            <span
                                class="el-cursor"
                                @click="fnGoPage(scope.row)"
                                v-if="scope.row.kf_student_num == 0 "
                            >0</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="need_audit"
                        show-overflow-tooltip
                        label="权限">
                        <template slot-scope="scope">
                            <template v-if="scope.row.shop_type == 3">
                                --
                            </template>
                            <template v-if="scope.row.shop_type != 3">
                                <template v-if="scope.row.need_audit == 1">需要审核</template>
                                <template v-if="scope.row.need_audit == 0">无需审核</template>
                            </template>

                        </template>
                    </el-table-column>
                    <el-table-column
                        label="客户类型"
                        prop="shop_group_title"
                        align="center"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="shop_status_str"
                        align="center"
                        show-overflow-tooltip
                        label="店铺状态"
                    />
                    <el-table-column
                        prop="shop_status"
                        show-overflow-tooltip
                        width="150px;"
                        label="上架状态">
                        <template slot-scope="scope">
                            <div class="zd-status-wrap">
                                <div v-if="scope.row.shop_status == 1">已上架</div>
                                <div v-if="scope.row.shop_status == 0">已下架</div>
                                <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    style="margin-left: 10px;"
                                    v-model="scope.row.shop_status"
                                />
                                <div
                                    class="zd-switch-fixed"
                                    @click.stop="fnChangeStatus(scope.row)"
                                />
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="create_time"
                        width="140"
                        label="创建时间"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.shop_type == 3">
                                --
                            </template>
                            <template v-if="scope.row.shop_type != 3">
                                <template v-if="scope.row.create_time">{{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</template>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        width="140"
                        label="关店时间"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.shop_type == 3">
                                --
                            </template>
                            <template v-if="scope.row.shop_type != 3">
                                <template v-if="scope.row.close_time && scope.row.shop_status === 0">{{ scope.row.close_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</template>
                                <template v-else>--</template>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        :width="220"
                        fixed="right"
                    >
                        <template slot-scope="scope">
                            <div class="el-goodlist">
                                <!-- <el-button
                                    type="text"
                                    @click="fnChangeClassifyStatus(scope.row)">
                                    <span v-if="scope.row.cate_status == 0">启用</span>
                                    <span v-if="scope.row.cate_status == 1">隐藏</span>
                                </el-button> -->
                                <el-button
                                    type="text"
                                    class="el-goodlist-text"
                                    @click="handleRoute('GoodsList', {shop_title: scope.row.shop_title})">
                                    查看商品
                                </el-button>
                                <el-button
                                    v-if="scope.row.shop_type == 1"
                                    type="text"
                                    class="el-goodlist-text"
                                    style="margin-left:10px;"
                                    @click="fnSetShopAuth(scope.row)">
                                    设置权限
                                </el-button>
                                <!--v2.1.4 2021.08.25隐藏-->
                                <!--<el-button
                                    v-if="scope.row.hire_no"
                                    type="text"
                                    class="el-goodlist-text"
                                    style="margin-left:10px;"
                                    @click="fnBindHireShop(scope.row, 0)">
                                    解绑
                                </el-button>
                                <el-button
                                    v-if="!scope.row.hire_no"
                                    type="text"
                                    class="el-goodlist-text"
                                    style="margin-left:10px;"
                                    @click="fnBindHireShop(scope.row, 1)">
                                    绑定
                                </el-button>
                                <el-button
                                    v-if="1"
                                    type="text"
                                    class="el-goodlist-text"
                                    style="margin-left:0px;"
                                    @click="fnBindKf(scope.row)">
                                    绑定客服
                                </el-button>
                                <el-button
                                    v-if="2"
                                    type="text"
                                    class="el-goodlist-text"
                                    style="margin-left:10px;"
                                    @click="fnUnBindkf(scope.row)">
                                    解绑客服
                                </el-button>
                                <el-button
                                    v-if="2"
                                    type="text"
                                    class="el-goodlist-text"
                                    style="margin-left:0px;"
                                    @click="fnGetContent(scope.row.shop_no)">
                                    设置自动回复
                                </el-button>-->
                                <el-button
                                    v-if="scope.row.shop_type == 1"
                                    type="text"
                                    @click="showSetDialog(scope.row)">
                                    编辑客户类型
                                </el-button>
                                <el-button
                                    v-if="scope.row.shop_type == 1"
                                    type="text"
                                    @click="bindingShop(scope.row)">
                                    绑定第三方店铺
                                </el-button>
                                <!-- :disabled="scope.row.kf_student_num == 0 " -->
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
        <!-- 学生店铺列表 -->
        <student-shop-list v-if="shop_type === '3'"/>
        <!-- 添加课程分类弹窗 -->
        <el-dialog
            title="分类"
            width="475px"
            :visible.sync="dialogAddVisible">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="80px"
                class="demo-ruleForm">
                <el-form-item
                    label="分类名称"
                    prop="cate_name">
                    <el-input
                        v-model="ruleForm.cate_name"
                        class="add-dialog-input"/>
                </el-form-item>

                <el-form-item
                    label="图标"
                    prop="cate_logo">
                    <el-upload
                        :show-file-list="false"
                        :http-request="e=> {fnUploadImageOfGoods(e)}"
                        accept="image/*"
                        class="upload-good-image"
                        action="https://jsonplaceholder.typicode.com/posts/">
                        <img
                            v-if="ruleForm.cate_logo"
                            :src="ruleForm.cate_logo"
                            class="avatar">
                        <i
                            v-else
                            class="el-icon-plus avatar-uploader-icon"/>
                    </el-upload>
                </el-form-item>

                <el-form-item
                    label="排序号"
                    prop="cate_sort">
                    <el-input
                        v-model="ruleForm.cate_sort"
                        type="number"
                        class="add-dialog-input"/>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 设置权限弹窗 -->
        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            custom-class="auth-dialog"
            center>
            <div class="dialog-auth">
                <div class="auth-title">该商家提交商品是否需要审核？</div>
                <div class="radio-wrap-dialog">
                    <el-radio-group v-model="authValue">
                        <el-radio :label="1">需要审核</el-radio>
                        <el-radio :label="0">无需审核</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnConfirmSetShopAuth">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 绑定弹窗 -->
        <el-dialog
            title="确认绑定？"
            :visible.sync="bindDialogFlag"
            width="400px"
        >
            <el-form
                :model="formBind"
                ref="formBind"
                :rules="rulesBind">
                <el-form-item
                    label="账户"
                    prop="hire_no"
                    :label-width="formLabelWidth">
                    <el-select
                        v-model="formBind.hire_no"
                        filterable
                        remote
                        placeholder="请输入关键词"
                        :remote-method="remoteMethod"
                        :loading="loading"
                        size="small"
                    >
                        <el-option
                            v-for="item in optionsShop"
                            :key="item.hire_no"
                            :label="item.company_name"
                            :value="item.hire_no"/>
                    </el-select>
                    <div class="hire-count-name">{{ fnComputedName(formBind.hire_no) }}</div>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="bindDialogFlag = false"
                    size="small"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    @click="fnBindDialog('formBind')"
                    size="small"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>

        <!-- 创建店铺 -->
        <el-dialog
            title="创建店铺"
            :visible.sync="bindDialogShop"
            width="600px"
        >
            <el-form
                :model="createShop"
                ref="createShop"
                :rules="rulesShop"
            >
                <el-form-item
                    label="企业"
                    prop="hire_no"
                    :label-width="formLabelWidth"
                >
                    <el-select
                        v-model="createShop.hire_no"
                        filterable
                        remote
                        placeholder="请输入关键词"
                        :remote-method="remoteMethod"
                        :loading="loading"
                        size="small"
                        style="width:440px;height:32px"
                    >
                        <el-option
                            v-for="item in optionsShop"
                            :key="item.hire_no"
                            :label="item.company_name"
                            :value="item.hire_no"
                        />
                    </el-select>
                    <div class="hire-count-name">{{ fnComputedName(formBind.hire_no) }}</div>
                </el-form-item>
                <el-form-item
                    label="店铺名称"
                    prop="shop_name"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        v-model="createShop.shop_name"
                        size="small"
                        placeholder="请输入店铺名称"
                        style="width:440px;height:32px"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="bindDialogShop = false"
                    size="small"
                    style="width:100px;height:32px"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    @click="fnCreateShop('createShop')"
                    size="small"
                    style="width:100px;height:32px;margin-left:40px"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>
        <!-- 自动回复设置 -->
        <el-dialog
            :visible.sync="dialogContent"
            width="530px"
            :close-on-click-modal="false"
            center
        >
            <p class="dialog-title">设置{{ ruleFormReply.shop_no ? '店铺' : '商城' }}自动回复</p>
            <el-form
                :model="ruleFormReply"
                ref="ruleForm"
                label-width="120px"
                class="demo-ruleForm"
            >
                <el-form-item
                    label="第一句自动回复:"
                    prop="name"
                >
                    <el-input
                        v-model="ruleFormReply.first"
                        size="small"
                        placeholder="请输入回复内容"
                    />
                </el-form-item>
                <el-form-item
                    label="第二句自动回复:"
                    prop="name"
                >
                    <el-input
                        v-model="ruleFormReply.second"
                        size="small"
                        placeholder="请输入回复内容"
                    />
                </el-form-item>
            </el-form>
            <div class="dialog-foot">
                <el-button
                    size="small"
                    style="width:100px"
                    @click="dialogContent = false"
                >
                    取消
                </el-button>
                <el-button
                    size="small"
                    type="primary"
                    style="width:100px;margin-left:60px"
                    :disabled=" !ruleFormReply.first || !ruleFormReply.second "
                    @click="fnConfirm()"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
        <!-- 绑定客服 -->
        <el-dialog
            title="绑定客服"
            :visible.sync="dialogVisibleBind"
            width="580px"
            :close-on-click-modal="false"
            center
            class="dialogVisibleBind"
        >
            <el-form
                :model="ruleFormBind"
                label-width="100px"
                class="demo-ruleForm"
                @submit.native.prevent
            >
                <el-form-item
                    label="用户:"
                >
                    <el-input
                        v-model="ruleFormBind.phone"
                        size="small"
                        @keyup.native.enter="fnBindSearch()"
                        placeholder="手机号或用户ID"
                        :style="{'width': '350px'}"
                    />
                    <el-button
                        type="primary"
                        size="small"
                        @click="fnBindSearch()"
                    >
                        搜索
                    </el-button>
                </el-form-item>
                <el-table
                    :data="tableDataBind"
                    height="100%"
                    style="width: 100%;"
                    border
                    v-if="tableDataBind.length > 0"
                >
                    <el-table-column
                        label="用户姓名"
                        prop="true_name"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        label="电话号码"
                        prop="phone"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        label="学校名称"
                        prop="school_name"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        label="操作"
                        prop="school_name"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <span
                                @click="fnDeleteData(scope.$index)"
                                class="el-delData"
                            >删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogVisibleBind = false"
                    size="small"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="fnConirmBind()">绑 定</el-button>
            </span>
        </el-dialog>
        <!-- /绑定客服 -->

        <!-- 解绑客服 -->
        <el-dialog
            title="解绑客服"
            :visible.sync="dialogVisibleUnBind"
            width="520px"
            :close-on-click-modal="false"
            center
            class="dialogVisibleUnBind"
        >
            <el-checkbox-group
                v-model="checkListKf"
            >
                <div
                    v-for="(item,index) in kfList"
                    :key="index"
                >
                    <el-checkbox
                        :label="item.student_no"
                        class="el-checkList"
                    >
                        <p class="dialogVisibleUnBind_text">
                            {{ item.true_name !== '' ? item.true_name + ' -' : '' }}
                            {{ item.school_name !== '' ? item.school_name + ' -' : '' }}
                            {{ item.student_no }}
                        </p>
                    </el-checkbox>
                </div>
            </el-checkbox-group>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    @click="dialogVisibleUnBind = false">取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    :disabled="ifBind"
                    @click="fnUntying()">解 绑</el-button>
            </span>
        </el-dialog>

        <!-- 修改店铺名称 -->
        <el-dialog
            title="修改店铺名称"
            :visible.sync="dialogChangeTilte"
            width="520px"
            :close-on-click-modal="false"
            center
        >
            <div class="zd-change-title">
                <p class="zd-change-title-de">
                    店铺名称：
                </p>
                <el-input
                    placeholder="请输入内容"
                    v-model="shop_title"
                    clearable
                    size="small"
                />
            </div>
            <div class="zd-change-foot">
                <el-button
                    type="default"
                    size="small"
                    style="width:120px;height:36px"
                    @click="dialogChangeTilte = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    style="width:120px;height:36px;margin-left:64px"
                    @click="fnChangeTitle()"
                >
                    确认
                </el-button>
            </div>
        </el-dialog>
        <!--设置客户类型弹窗-->
        <set-customer-type-dialog
            ref="setCustomerTypeDialog"
            :shop-group-list="shop_group_list"
            @confirm="beforeSetCustomerType($event)"
        />
    </div>
</template>

<script>
import StudentShopList from "../bid/settle/student-shop-list";
import SetCustomerTypeDialog from "@/components/shop-manage/set-customer-type-dialog";
import {bindingShopDialog} from "@/components/shop-manage/binding-shop";
import {editBindingShopDialog} from "@/components/shop-manage/edit-binding-shop";
export default {
    components: {SetCustomerTypeDialog, StudentShopList},
    data() {
        var checkTypeLogo = (rule, value, callback) => {
            if (this.ruleForm.cate_logo == '') {
                return callback(new Error('请上传分类图片'));
            }else{
                callback();
            }
        };

        return {
            ruleFormReply: {
                first: '',
                second: ''
            },
            dialogContent: false,
            createShop: {
                hire_no: '',
                shop_name: ''
            },
            rulesShop: {
                hire_no: [
                    { required: true, message: '请输入需要绑定的企业', trigger: 'blur' }
                ],
                shop_name: [
                    { required: true, message: '请填写店铺名称', trigger: 'blur' }
                ]
            },
            bindDialogShop: false,//创建店铺弹窗
            shop_title: '',
            dialogChangeTilte: false,
            ifBind: true,
            checkListKf:[],
            kfList: [],
            dialogVisibleUnBind: false,
            tableDataBind: [],
            ruleFormBind: {
                phone: ''
            },
            dialogVisibleBind: false,
            authResult: {},
            tableData: [],
            tableLoading: false,
            filterData: {
                shop_no: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket'),
            dialogAddVisible: false,
            centerDialogVisible: false,
            bindDialogFlag: false,
            typeList: [],
            selectList: [],
            ruleForm: {
                cate_name: '',
                type: '1',
                cate_sort: '',
                cate_no: '',
                cate_logo: ''
            },
            typeDisabled: false,
            rules: {
                cate_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ],
                cate_sort: [
                    { required: true, message: '请输入排序编号', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择课程分类', trigger: 'change' }
                ],
                cate_logo: [
                    {validator: checkTypeLogo, trigger: 'blur'}
                ]
            },
            rulesBind: {
                hire_no: [
                    { required: true, message: '请输入需要绑定的账户', trigger: 'blur' }
                ]
            },
            authValue: 0,
            formBind: {
                hire_no: ''
            },
            formLabelWidth: '80px',
            optionsShop: [],
            loading: false,
            shop_no: '',
            shop_type: '1',
            keyword: '',
            student_no: '',
            keyword_hire_id: '',
            company_name: '',
            // 当前筛选客户编号
            shop_group: 0,
            // 客户类型列表
            shop_group_list: [],
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        this.$store.commit('SET_HEADER', [
            {
                title: "校园代理",
            },
            {
                title: '商城'
            },
            {
                title: '店铺管理'
            }
        ]);
        let query = this.$route.query;

        if (query.student_no !== undefined) {
            this.student_no = query.student_no;
        }
        if (query.page !== undefined) {
            this.page.now_page = Number(query.page);
        }
        if(query.shop_group) {
            this.shop_group = query.shop_group;
        }
        if(query.shop_no) {
            this.keyword = query.shop_no;
        }

        this.getTableData();
        this.getHireList();
        this.getShopGroupList();
    },
    watch: {
        dialogContent (val) {
            if (!val) {
                this.ruleFormReply = {
                    first: '',
                    second: ''
                };
            }
        },
        dialogVisibleUnBind (val) {
            if (!val) {
                this.kfList = [];
                this.checkListKf = [];
            }
        },
        dialogVisibleBind (val) {
            if (!val) {
                this.tableDataBind = [];
            }
        },
        checkListKf (val) {
            if (val.length > 0) {
                this.ifBind = false;
            } else {
                this.ifBind = true;
            }
        },
        bindDialogShop (val) {
            if(!val) {
                this.createShop = {
                    hire_no: '',
                    shop_name: ''
                };
            }
        }
    },
    filters: {
    },
    methods: {
        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.tableLoading = true;
            // this.tableData = [];
            this.$post('/student/shop%5Cget_list', {
                page_id: page || this.page.page_id,
                kf_student_no: this.student_no,
                shop_type: this.shop_type,
                keyword: this.keyword,
                keyword_hire_id: this.keyword_hire_id,
                company_name: this.company_name,
                shop_group: this.shop_group,
                shop_no: this.filterData.shop_no
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.page_id = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    if (this.page.page_id > resp.data.page.total_page && this.page.page_id !== 1) {
                        this.getTableData(resp.data.page.total_page);
                    }
                }
                this.tableLoading = false;
            });
        },

        /**
         * 获取客户类型列表
         */
        getShopGroupList() {
            this.$post('/student/shop_group%5Cget_list_for_select', {}, resp => {
                if (resp.code === 1) {
                    this.shop_group_list = resp.data.list;
                }
            });
        },

        /**
         * 绑定客服
         */
        fnBindKf (row) {
            this.shop_no = row.shop_no;
            this.dialogVisibleBind = !this.dialogVisibleBind;
        },

        /**
         * 确认绑定客服
         */
        fnConirmBind () {
            if (this.tableDataBind.length == 0) {
                this.$message({
                    type: 'waring',
                    message: '绑定客服不可以为空'
                });
                return;
            }

            let kf_student = '';

            this.tableDataBind.map(item=>{
                kf_student += item.student_no + ',';
            });

            this.$post('/student/shop_kf%5Cbind_kf',{
                shop_no: this.shop_no,
                student_nos: kf_student
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    this.dialogVisibleBind = !this.dialogVisibleBind;
                    this.$message({
                        type: 'success',
                        message: '绑定成功'
                    });
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 解绑客服
         */
        fnUnBindkf (row) {
            this.shop_no = row.shop_no;
            this.dialogVisibleUnBind = !this.dialogVisibleUnBind;
            this.$post('/student/shop_kf%5Cget_bind_kf_list',{
                shop_no: row.shop_no
            },resp=> {
                if (resp.code == 1) {
                    if (resp.data.length !== 0) {
                        this.kfList = this.kfList.concat(resp.data.list);
                    }
                }
            });
        },

        /**
         * 确定解绑客服
         */
        fnUntying (row) {
            let kf = '';

            this.$post('/student/shop_kf%5Cun_bind_kf',{
                shop_no: this.shop_no,
                student_nos: this.checkListKf.join()
            },resp=>{
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    });
                    this.dialogVisibleUnBind = !this.dialogVisibleUnBind;
                    this.getTableData();
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 创建店铺
         */
        fnCreateShop (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/shop%5Ccreate',{
                        hire_no: this.createShop.hire_no,
                        shop_title: this.createShop.shop_name
                    },resp=>{
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '创建成功'
                            });
                            this.bindDialogShop = !this.bindDialogShop;
                            this.getTableData();
                        } else if (resp.code == 0) {
                            this.$message({
                                type: 'waring',
                                message: resp.msg
                            });
                        }
                    });
                } else {
                    return false;
                }
            });
        },

        /**
         * 获取企业列表
         */
        getHireList () {
            this.$post('/student/company%5Cget_list',{},resp=>{
                if (resp.code == 1) {
                    //
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 搜索
         */
        fnBindSearch () {

            this.$post('/student/student_user%5Cget_list_suggest',{
                keyword: this.ruleFormBind.phone
            },resp=>{
                if (resp.code == 1) {
                    if (resp.data.list.length == 0) {
                        this.$message({
                            type: 'waring',
                            message: '未搜索到该用户!'
                        });
                        this.ruleFormBind.phone = '';
                        return;
                    }
                    this.tableDataBind = resp.data.list;
                    this.ruleFormBind.phone = '';
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 删除用户
         */
        fnDeleteData (index) {
            this.tableDataBind.splice(index,1);
        },

        /**
         * 客服管理页面
         */
        fnGoPage (row) {
            this.$router.replace({
                name: 'kfAdmin',
                query: {
                    shop_no: row.shop_no
                }
            });
        },

        fnChangeStatus(row) {

            if(row.shop_status) {
                this.$post('/student/shop_agent%5Cget_shop_stat',{
                    shop_no: row.shop_no
                }, resp => {
                    if(resp.code == 1) {
                        if(Number(resp.data.agent_count) > 0) {
                            this.$confirm('该店铺下存在校园代理用户，一旦下架将可能影响该此类用户，是否确认下架？', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.fnSetStatus(row,0);
                            });
                        } else {
                            this.fnSetStatus(row,0);
                        }
                    }
                });
            } else {
                this.fnSetStatus(row, 1);
            }
        },

        /**
         * 店铺上架/下架
         */
        fnSetStatus (row, type) {
            this.$post('/student/shop%5Cset_status', {
                shop_no: row.shop_no,
                shop_status: type
            }, resp => {
                if (resp.code == 1) {
                    this.$set(row, 'shop_status', row.shop_status ? 0 : 1);
                    if(type == 0) {
                        this.$message({
                            type: 'success',
                            message: '下架成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'success',
                            message: '上架成功',
                            center: true
                        });
                    }
                    this.getTableData();
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        fnComputedName(name) {
            let result = '';

            this.optionsShop.map((item, index) => {
                if(name == item.shop_no) {
                    result = item.shop_title;
                }
            });
            return result;
        },
        remoteMethod(word) {
            if(word != '') {
                this.loading = true;
                this.$post('/student/shop%5Ccompany_suggest', {
                    keyword: word
                }, resp => {
                    if (resp.code == 1) {
                        this.optionsShop = resp.data.list;
                    }
                });
                this.loading = false;
            }else{
                this.optionsShop = [];
            }
        },
        fnCloseBindDialog() {
            this.bindDialogFlag = false;
            this.resetForm('formBind');
        },
        fnBindDialog(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.fnShopBind(this.shop_no, this.formBind.hire_no, () => {
                        this.bindDialogFlag = false;
                    });
                } else {
                    console.log(valid);
                    return false;
                }
            });
        },
        fnSetShopAuth(row) {
            this.shop_no = row.shop_no;
            this.authValue = row.need_audit;
            this.centerDialogVisible = true;
        },
        fnConfirmSetShopAuth() {
            this.$post('/student/shop%5Cmodify', {
                shop_no: this.shop_no,
                need_audit: this.authValue
            }, resp => {
                if (resp.code == 1) {
                    this.centerDialogVisible = false;
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnUploadImageOfGoods(e) {
            this.fnUploadImage(e, (resp) => {
                this.ruleForm.cate_logo = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },
        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        fnAddClick() {
            this.$router.replace({
                name: 'TaoShopList',
                query: {
                    page: this.page.now_page
                }
            });
        },
        /**
         * 获取自动回复
         */
        fnGetContent (shop_no) {
            let url = shop_no ? '/student/shop_robot%5Cget_shop_auto_reply' : '/student/shop_robot%5Cget_auto_reply';

            this.$post(url,{
                shop_no: shop_no
            },resp=> {
                if (resp.code == 1) {
                    this.ruleFormReply = {
                        shop_no: shop_no,
                        first: resp.data ? resp.data.reply_first : '',
                        second: resp.data ? resp.data.reply_second : ''
                    };
                    this.dialogContent = !this.dialogContent;
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 设置自动回复
         */
        fnConfirm () {
            let url = this.ruleFormReply.shop_no ? '/student/shop_robot%5Cupdate_shop_auto_reply' : '/student/shop_robot%5Cupdate_auto_reply';

            this.$post(url,{
                shop_no: this.ruleFormReply.shop_no,
                reply_first: this.ruleFormReply.first,
                reply_second: this.ruleFormReply.second
            },resp=> {
                if (resp.code == 1) {
                    this.dialogContent = !this.dialogContent;
                    this.$message({
                        type: 'success',
                        message: '设置成功'
                    });
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        fnEditClassify(row) {
            this.ruleForm = {
                cate_name: row.cate_name,
                cate_sort: row.cate_sort,
                cate_no: row.cate_no,
                cate_logo: row.cate_logo
            };
            this.dialogAddVisible = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = {};

                    data.cate_no = this.ruleForm.cate_no;
                    data.cate_name = this.ruleForm.cate_name;
                    data.cate_sort = this.ruleForm.cate_sort;
                    data.cate_logo = this.ruleForm.cate_logo;
                    this.fnSetData(data);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        fnSetData(data) {
            this.$post('/student/shop_goods_cate%5Csave', data, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                    this.resetForm('ruleForm');
                    this.dialogAddVisible = false;
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        fnChangeClassifyStatus(row) {
            let status = row.cate_status == 1 ? 0 : 1;

            this.$post('/student/shop_goods_cate%5Cmodify', {
                cate_no: row.cate_no,
                cate_status: status
            }, resp => {
                if (resp.code == 1) {
                    this.$set(row, 'cate_status', status);
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                }
            });
        },
        fnShopBind(shop_no, hire_no, cb) {
            this.$post('/student/shop%5Cbind', {
                shop_no: shop_no,
                hire_no: hire_no
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    if(cb) {
                        cb();
                    }
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                }
                if(resp.code == 0){
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnBindHireShop(row, type) {
            // 解绑
            if(type == 0) {
                this.$confirm('是否确定解绑该商家账户？', '确认解绑', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fnShopBind(row.shop_no, '', null);
                }).catch(() => {
                });
            }else if(type == 1) { //绑定
                this.formBind.hire_no = '';
                this.optionsShop = [];
                this.shop_no = row.shop_no;
                this.bindDialogFlag = true;
            }else{
                console.log('type error');
            }
        },

        /**
         * 获取信息
         */
        fnGetInfo (row) {
            this.dialogChangeTilte = !this.dialogChangeTilte;
            this.shop_title = row.shop_title;
            this.shop_no = row.shop_no;
        },

        /**
         * 修改店铺名称
         */
        fnChangeTitle () {
            if(this.shop_title) {
                this.$post('/student/shop%5Cmodify', {
                    shop_no: this.shop_no,
                    shop_title: this.shop_title
                }, resp => {
                    if (resp.code == 1) {
                        this.dialogChangeTilte = !this.dialogChangeTilte;
                        this.$message({
                            type: 'success',
                            message: '修改成功',
                            center: true
                        });
                    }
                });
            } else {
                this.$message({
                    type: 'warning',
                    message: '店铺名称不可以为空',
                    center: true
                });
            }
        },

        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /**
         * 显示编辑客户类型弹窗
         * @param row
         */
        showSetDialog(row) {
            this.shop_no = row.shop_no;
            this.$refs.setCustomerTypeDialog.show(row.shop_group);
        },

        /**
         * 设置客户类型前确认是否修改财控计划
         * @param shop_group
         */
        beforeSetCustomerType(shop_group) {
            let params = {
                shop_no: this.shop_no,
                sync_finance_control: 0,
                shop_group
            };

            this.$zdConfirm('是否更新店铺财控计划？', '温馨提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                showClose: true,
                type: 'warning'
            }).then(() => {
                params.sync_finance_control = 1;
                this.setCustomerType(params);
            }).catch(() => {
                params.sync_finance_control = 0;
                this.setCustomerType(params);
            });
        },

        /**
         * 确认设置客户类型弹窗
         * @param params
         */
        setCustomerType(params) {
            this.$post('/student/shop%5Cset_shop_group', params, res => {
                if (res.code === 1) {
                    this.$refs.setCustomerTypeDialog.close();
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '设置成功',
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 绑定三方店铺
         * @param row
         */
        async bindingShop(row) {
            let result = await bindingShopDialog({
                shopNo: row.shop_no,
                shopTitle: row.shop_title
            });

            if(result) {
                this.getTableData();

            }
        },

        /**
         * 编辑第三方店铺
         * @param row
         * @returns {Promise<void>}
         */
        async editBindingShop(row) {
            let result = await editBindingShopDialog({
                rowData: row
            });

            if(result) {
                this.getTableData();
            }
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    margin: 12px;
    width: calc(100% - 24px);
    background: #fff;
}
.add-dialog-input{
    width: 350px;
}
/deep/ .el-tabs {
    .el-tabs__nav-wrap {
        height: 54px;
        padding-left: 24px;

        .el-tabs__nav-scroll {
            .el-tabs__nav {
                height: 54px;
                line-height: 54px;
            }
        }
    }
}

// 表格
.data-table {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    // 操作按钮
    .option-btn-group {
        .el-button {
            margin-left: 0;
            margin-right: 10px;
        }
    }
}

.operation-wrapper {
    display: flex;
    padding: 12px 23px 12px 0;
    background-color: #fff;
    flex-wrap: wrap;
    // justify-content: space-between;
    .select-container{
        flex: 1;
    }
    .el-button {
        float: right;
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 24px;
    overflow: hidden;
    .shop-active {
        color: #FF0000;
    }
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
    .sub-logo{
        width: 50px;
        height: 50px;
    }
}
.pagination-wrapper {
    padding: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.el-cursor{
    color: rgb(64, 158, 255);
    cursor: pointer;
}
.el-delData {
    cursor: pointer;
    color: rgb(64, 158, 255);
}
.el-checkList {
    display: flex;
    margin-bottom: 25px;
}
.el-goodlist {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    line-height: 23px;
    padding: 15px 0;
    .el-button {
        margin-left: 0;
        margin-right: 10px;
    }
}
.zd-status-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.zd-switch-fixed {
    width: 60px;
    height: 30px;
    position: absolute;
    left: 47px;
    top: 0px;
    z-index: 1;
    cursor: pointer;
}
.shop-wrapper {
    display: flex;
    align-items: center;
}
.zd-shop-title {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    .zd-title {
        width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .el-icon-edit {
        padding: 0 10px;
        &:hover {
            color: #409EFF;
        }
    }
}
.zd-change-title {
    display: flex;
    height: 32px;
    align-items: center;
    &-de {
        white-space: nowrap;
    }
}
.zd-change-foot {
    height: 36px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
.dialog-footer {
    display: flex;
    justify-content: center;
}
.dialog-title {
    color: #1F2D3D;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}
.dialog-foot {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 44px;
    height: 32px;
    align-items: center;
}
</style>
<style lang="less">
.jingang-list-container {
    tbody {
        .cell {
            // display: flex;
            // align-items: center;
            height: auto !important;
        }
    }
    .upload-good-image{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        display: flex;
        border: 1px dashed #d9d9d9;
        border-radius: 4px;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        color: #8c939d;
        img{
            width: 100px;
            height: 100px;
        }
    }
}
.shoplist {
    .el-table__row .el-button {
        padding: 5px 0px;
    }
    .el-goodlist {
        padding:  0px;
    }
}
.auth-dialog{
    .dialog-auth{
        .auth-title{
            text-align: center;
            padding: 0 0 30px 0;
        }
        .radio-wrap-dialog{
            text-align: center;
        }
    }
}
.jingang-list-container .dialogVisibleBind .el-table__body-wrapper{
    height: auto !important;
}
.jingang-list-container .dialogVisibleBind .el-form .el-table {
    max-height: 400px;
    overflow-y: auto;
}
.jingang-list-container .dialogVisibleUnBind .el-checkbox-group {
    max-height: 400px;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 3px;
    }
    .dialogVisibleUnBind_text {
        width: 430px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
